<header class="page-header clearfix">
    <h4><a ng-href="#/k8s"><i class="fa fa-arrow-left"></i></a>{{::ov.dbName}}</h4>
    <ol class="breadcrumb">
        <li><a ng-href="#/k8s">容器集群</a></li>
        <li class="active">集群概览</li>
    </ol>
</header>
<section>
    <div class="ov-category clearfix">
        <ui-panel>
            <a ui-sref="k8s-node.group({kDbCode: ov.dbCode})">
                <div class="category-icon">
                    <div class="category-icon-img"><i class="fa fa-database fa-2x"></i></div>
                    <div class="category-icon-text">宿主机</div>
                </div>
                <div class="animate">{{::ov.node}}</div>
            </a>
        </ui-panel>
        <ui-panel>
            <div>
                <div class="category-icon">
                    <div class="category-icon-img"><i class="fa fa-cube fa-2x"></i></div>
                    <div class="category-icon-text">容器</div>
                </div>
                <div class="animate">{{::ov.pod}}</div>
            </div>
        </ui-panel>
        <ui-panel>
            <a ui-sref="k8s-service({kDbCode: ov.dbCode})">
                <div class="category-icon">
                    <div class="category-icon-img"><i class="fa fa-gears fa-2x"></i></div>
                    <div class="category-icon-text">服务</div>
                </div>
                <div class="animate">{{::ov.service}}</div>
            </a>
        </ui-panel>
    </div>
    <div class="ov-resource">
        <div class="resource-header">
            <h5>资源细况</h5>
        </div>
        <div class="resource-container clearfix">
            <div class="panel" ng-repeat="node in ::ov.nodes.slice(0, 11)">
                <div class="panel-heading"><a ui-sref="k8s-node-detail.pod({ip: node.nodeIp, kDbCode: ov.dbCode})">{{::node.nodeIp}}</a></div>
                <div class="panel-body">
                    <ui-chart config="::ov.config" data="ov.resData[$index]"></ui-chart>
                    <div class="chart-label">
                        <table class="table">
                            <tbody>
                            <tr class="label-cpu">
                                <td class="text-right">CPU</td>
                                <td ng-switch="node.nodeStatus">
                                    <strong ng-switch-when="true">{{ov.resData[$index][0].datapoints[0].y}}%</strong>
                                    <span ng-switch-when="false" class="text-danger">N/A</span>
                                </td>
                            </tr>
                            <tr class="label-mem">
                                <td class="text-right">内存</td>
                                <td ng-switch="node.nodeStatus">
                                    <strong ng-switch-when="true">{{ov.resData[$index][1].memText}}</strong>
                                    <span ng-switch-when="false" class="text-danger">N/A</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div ng-if="::ov.nodes.length > 11" class="panel resource-more">
                <div class="panel-heading"><a ui-sref="k8s-node.group({kDbCode: ov.dbCode})">更多</a></div>
                <div class="panel-body">
                    <table class="table table-hover">
                        <tbody>
                        <tr ng-repeat="node in ::ov.nodes.slice(11, ov.nodes.length)">
                            <td><a ui-sref="k8s-node-detail.pod({ip: node.nodeIp, kDbCode: ov.dbCode})">{{::node.nodeIp}}</a></td>
                            <td class="label-cpu text-right" ng-switch="node.nodeStatus">
                                <strong ng-switch-when="true">{{ov.resData[11+$index][0].datapoints[0].y}}%</strong>
                                <span ng-switch-when="false" class="text-danger">N/A</span>
                            </td>
                            <td class="label-mem text-right" ng-switch="node.nodeStatus">
                                <strong ng-switch-when="true">{{ov.resData[11+$index][1].memText}}</strong>
                                <span ng-switch-when="false" class="text-danger">N/A</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>